<template>
	<view>
		<view class="goods-list">
			<view v-for="(goods,i) in goodsList" :key="i" @click="gotoDetail(goods.goods_id)">
				<my-goods :goods="goods"></my-goods>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 请求参数对象
				queryObj:{
					// 关键词
					query:'',
					// 商品分类id
					cid:'',
					// 页码值
					pagenum:1,
					// 每页显示多少条数据
					pagesize:10
				},
				// 商品列表的数据
				goodsList:[],
				// 总数量，用来分页
				total:0,
				// 是否在请求数据，设置节流阀
				isloading:false
			};
		},
		onLoad(options) {		
			// 解析页面参数，存入this.queryObj中
			this.queryObj.query=options.query||''
			this.queryObj.cid=options.cid||''
			this.getGoodsList()
		},
		methods:{
			// 获取商品列表
			async getGoodsList(cb){
				this.isloading=true
				let {data:res} = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)
				this.isloading=false
				// 数据请求完毕，立即调用 cb 回调函数
				cb && cb()
				if(res.meta.status==200){
					// 每次获取数据，将新数据和旧数据拼接
					this.goodsList=[...this.goodsList,...res.message.goods]
					this.total = res.message.total
				}else return uni.$showMsg()
			},
			// 页面触底的时候，获取新的数据
			onReachBottom(){
				// 判断是否还有下一页数据
				if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total) return uni.$showMsg('数据加载完毕！')
				
				// 判断是否正在请求其它数据，如果是，则不发起额外的请求
				if(this.isloading) return 
				// 页码增加1，重新获取数据
				this.queryObj.pagenum++
				this.getGoodsList()
			},
			// 下拉刷新，重新获取数据
			onPullDownRefresh(){
				this.queryObj.pagenum=1
				this.total=0
				this.isloading=false
				this.goodsList=[]
				this.getGoodsList(
					// 停止当前页面刷新
					()=>uni.stopPullDownRefresh()
				)
			},
			//点击商品，进入商品详情页
			gotoDetail(id){
				uni.navigateTo({
					url:'/subpkg/goods_detail/goods_detail?goods_id='+id
				})
			}
		}
	}
</script>

<style lang="scss">

</style>
